
<template>
  <div class="min-h-screen bg-gradient-to-br from-qinghua-blue to-qinghua-light py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 标题 -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-white mb-4">限量抽签</h1>
        <p class="text-xl text-white opacity-90">青花瓷娃娃限量发售，公平公正公开</p>
      </div>
      
      <!-- 倒计时卡片 -->
      <div class="bg-white rounded-2xl shadow-2xl p-8 mb-8">
        <div class="text-center">
          <h2 class="text-2xl font-bold text-qinghua-blue mb-4">距离抽签开始</h2>
          <div class="grid grid-cols-4 gap-4 max-w-md mx-auto">
            <div class="text-center">
              <div class="bg-qinghua-blue text-white text-3xl font-bold rounded-lg p-4">
                {{ countdown.days }}
              </div>
              <p class="text-sm text-gray-600 mt-2">天</p>
            </div>
            <div class="text-center">
              <div class="bg-qinghua-blue text-white text-3xl font-bold rounded-lg p-4">
                {{ countdown.hours }}
              </div>
              <p class="text-sm text-gray-600 mt-2">时</p>
            </div>
            <div class="text-center">
              <div class="bg-qinghua-blue text-white text-3xl font-bold rounded-lg p-4">
                {{ countdown.minutes }}
              </div>
              <p class="text-sm text-gray-600 mt-2">分</p>
            </div>
            <div class="text-center">
              <div class="bg-qinghua-blue text-white text-3xl font-bold rounded-lg p-4">
                {{ countdown.seconds }}
              </div>
              <p class="text-sm text-gray-600 mt-2">秒</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 抽签产品展示 -->
      <div class="bg-white rounded-2xl shadow-2xl p-8 mb-8">
        <h2 class="text-2xl font-bold text-qinghua-blue mb-6 text-center">本期抽签产品</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div>
            <div class="aspect-square bg-gradient-to-br from-qinghua-blue to-qinghua-light rounded-xl flex items-center justify-center">
              <div class="text-white text-center">
                <i class="fas fa-cube text-6xl mb-4 opacity-50"></i>
                <h3 class="text-xl font-bold">青花珍藏版</h3>
              </div>
            </div>
          </div>
          
          <div class="space-y-4">
            <h3 class="text-xl font-bold text-gray-900">青花珍藏版娃娃</h3>
            <p class="text-3xl font-bold text-qinghua-blue">¥599</p>
            <p class="text-gray-600">限量100体，每体都有独立编号和收藏证书</p>
            
            <div class="space-y-2">
              <div class="flex justify-between">
                <span class="text-gray-600">总数量</span>
                <span class="font-semibold">100体</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">已报名</span>
                <span class="font-semibold text-red-500">{{ participants }}人</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">中签率</span>
                <span class="font-semibold text-green-500">{{ winRate }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 报名区域 -->
      <div class="bg-white rounded-2xl shadow-2xl p-8">
        <h2 class="text-2xl font-bold text-qinghua-blue mb-6 text-center">参与抽签</h2>
        
        <form @submit.prevent="submitRaffle" class="max-w-md mx-auto space-y-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">姓名</label>
            <input 
              v-model="form.name"
              type="text"
              required
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-qinghua-blue focus:border-transparent"
              placeholder="请输入真实姓名"
            />
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">手机号</label>
            <input 
              v-model="form.phone"
              type="tel"
              required
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-qinghua-blue focus:border-transparent"
              placeholder="请输入手机号"
            />
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">收货地址</label>
            <textarea 
              v-model="form.address"
              required
              rows="3"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-qinghua-blue focus:border-transparent"
              placeholder="请输入详细收货地址"
            ></textarea>
          </div>
          
          <div class="flex items-center">
            <input 
              v-model="form.agree"
              type="checkbox"
              required
              class="h-4 w-4 text-qinghua-blue focus:ring-qinghua-blue border-gray-300 rounded"
            />
            <label class="ml-2 text-sm text-gray-700">
              我已阅读并同意<a href="#" class="text-qinghua-blue hover:underline">抽签规则</a>
            </label>
          </div>
          
          <button 
            type="submit"
            :disabled="!canJoin"
            class="w-full bg-gradient-to-r from-qinghua-blue to-qinghua-light text-white py-4 rounded-xl font-semibold hover:opacity-90 transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {{ canJoin ? '立即报名' : '抽签未开始' }}
          </button>
        </form>
        
        <!-- 抽签结果提示 -->
        <div v-if="raffleResult" class="mt-6 text-center">
          <div :class="raffleResult.success ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'" 
               class="p-4 rounded-lg">
            <i :class="raffleResult.success ? 'fas fa-check-circle' : 'fas fa-times-circle'" 
               class="text-2xl mb-2"></i>
            <p class="font-semibold">{{ raffleResult.message }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 倒计时
const countdown = ref({
  days: 0,
  hours: 0,
  minutes: 0,
  seconds: 0
})

// 参与者数量（模拟数据）
const participants = ref(2847)

// 表单数据
const form = ref({
  name: '',
  phone: '',
  address: '',
  agree: false
})

// 抽签结果
const raffleResult = ref(null)

// 计算中签率
const winRate = computed(() => {
  return Math.round((100 / participants.value) * 100)
})

// 是否可以参与
const canJoin = computed(() => {
  // 这里应该有实际的倒计时逻辑
  return true
})

// 更新倒计时
const updateCountdown = () => {
  // 模拟倒计时到明天中午12点
  const now = new Date()
  const target = new Date()
  target.setDate(target.getDate() + 1)
  target.setHours(12, 0, 0, 0)
  
  const diff = target - now
  
  if (diff > 0) {
    countdown.value = {
      days: Math.floor(diff / (1000 * 60 * 60 * 24)),
      hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
      minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
      seconds: Math.floor((diff % (1000 * 60)) / 1000)
    }
  } else {
    countdown.value = { days: 0, hours: 0, minutes: 0, seconds: 0 }
  }
}

// 提交抽签
const submitRaffle = () => {
  // 模拟抽签逻辑
  const isWinner = Math.random() < 0.035 // 约3.5%的中奖率
  
  raffleResult.value = {
    success: isWinner,
    message: isWinner 
      ? '恭喜您！成功获得购买资格，请在24小时内完成支付' 
      : '很遗憾，本次未中签，感谢您的参与'
  }
  
  if (isWinner) {
    participants.value--
  }
  
  // 重置表单
  form.value = { name: '', phone: '', address: '', agree: false }
}

let countdownInterval

onMounted(() => {
  updateCountdown()
  countdownInterval = setInterval(updateCountdown, 1000)
})

onUnmounted(() => {
  if (countdownInterval) {
    clearInterval(countdownInterval)
  }
})
</script>
